var myChart;
var Piechart;
var data;
var datatext = new Array();
			var vm = new Vue({
				el:"#app",
				data:{
					items:[],
					more:false,
					text:{time:'',charts:'近15日每日销售额趋势'},
					showtime:true,
					stock:true,
					yesterday:true,
					allmoney:0
				},
				methods:{
					nav:function(){		//导航点击
						$.each($('.nav li'), function(index) {				//天数切换
							$(this).click(function(){
								$('.nav li').removeClass('active');
								$(this).addClass('active');
								vm.view(index);
							});
						});					
					},
					picnav:function(data){
						$.each($('.view-nav li'), function(index) {			//饼状图切换
							$(this).click(function(){
								$('.view-nav li').removeClass('active');
								$(this).addClass('active');
								vm.pieview(index,data);
							});
						});
					},
					view:function(n){		//视图切换	
						this.showtime = true;
						var now = new Date();
						var oneDay = 24 * 3600 * 1000;	
						$.each($('.toggle h2 i'), function(index) {
							$(this).attr('class','fa fa-caret-down');
						});
						$('.tablebox').show();
						if(n == 0){			//昨日
							this.showtime = true;
							this.stock = true;
							this.yesterday = true;
							this.text.charts = '近15日每日销售额趋势';
							var date = new Date(now-oneDay);
							this.text.time = date.getFullYear()+'.'+(date.getMonth()+1)+'.'+date.getDate();							
							this.postdate(1);
						}
						if(n == 1){			//近七天
							this.showtime = true;
							this.stock = false;
							this.yesterday = false;
							this.text.charts = '热销商品排行';
							var start = new Date(now-oneDay);
							var end = new Date(now-oneDay*7);
							this.text.time = start.getFullYear()+'.'+(start.getMonth()+1)+'.'+start.getDate()+' - '+end.getFullYear()+'.'+(end.getMonth()+1)+'.'+end.getDate();														
							this.postdate(7);
							this.picnav(data);
							this.pieview(0,data);
							Piechart.setOption(option2);							
						}
						if(n == 2){			//近30天
							this.stock = false;
							this.yesterday = false;
							this.text.charts = '热销商品排行';
							var start = new Date(now-oneDay);
							var end = new Date(now-oneDay*30);
							this.text.time = start.getFullYear()+'.'+(start.getMonth()+1)+'.'+start.getDate()+' - '+end.getFullYear()+'.'+(end.getMonth()+1)+'.'+end.getDate();
							this.postdate(30);
							this.picnav(data);
							this.pieview(0,data);
							Piechart.setOption(option2);
						}
						if(n == 3){			//自定义	
							this.showtime = false;
							this.stock = false;
							this.yesterday = false;
							this.text.charts = '热销商品排行';							
						}
						setTimeout(function(){
								Piechart.resize();
							},0);
					},
					pieview:function(n,data){
						if(n == 0){  //按销售额
							this.piechart(data.price);
						}
						if(n == 1){		//按销量
							this.piechart(data.sales);
						}
						Piechart.resize();
						Piechart.setOption(option2);			
					},
					sorttype:function(n,event){
						if(n == 0){		//库存排序
							this.sort(n,event);
						};
						if(n == 1){		//销售额排序	
							this.sort(n,event);
						};
						if(n == 2){		//销售数量排序
							this.sort(n,event);
						};
					},
					sort:function(n,event){	//排序
						$.each($('.sort'), function(index) {					
							if($(this)[0] == $(event.target)[0]){
									$(event.target).find('i').eq(1).hide();
									$(event.target).find('i').eq(0).css('top','10px');
										if($(event.target).find('i').eq(0).hasClass('fa-caret-up')){		//从低到高
											$(event.target).find('i').eq(0).removeClass('fa-caret-up');
											$(event.target).find('i').eq(0).addClass('fa-caret-down');											
											if(n == 0){
												vm.items.sort(vm.down("stock"));
											}
											if(n == 1){
												vm.items.sort(vm.down("money"));
											}
											if(n == 2){
												vm.items.sort(vm.down("num"));
											}
										}else{																//从高到低
											$(event.target).find('i').eq(0).addClass('fa-caret-up');		
											$(event.target).find('i').eq(0).removeClass('fa-caret-down');	
											if(n == 0){
												vm.items.sort(vm.up("stock"));
											}
											if(n == 1){
												vm.items.sort(vm.up("money"));	
											}
											if(n == 2){
												vm.items.sort(vm.up("num"));
											}																						
										};
							}else{						
								$(this).find('i').show();
								$(this).find('i').eq(0).css('top','7px').attr('class','fa fa-caret-up');
								$(this).find('i').eq(1).css('bottom','8px').attr('class','fa fa-caret-down');
							}							
						});					
					},
					up:function(prop){				//从高到低排序函数
					    return function (obj1, obj2) {
					        var val1 = obj1[prop];
					        var val2 = obj2[prop];
					        if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
					            val1 = Number(val1);
					            val2 = Number(val2);
					        }
					        if (val1 < val2) {
					            return -1;
					        } else if (val1 > val2) {
					            return 1;
					        } else {
					            return 0;
					        }            
					    } 													
					},
					down:function(prop){				//从低到高排序函数
						    return function (obj1, obj2) {
					        var val1 = obj1[prop];
					        var val2 = obj2[prop];
					        if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
					            val1 = Number(val1);
					            val2 = Number(val2);
					        }
					        if (val1 > val2) {
					            return -1;
					        } else if (val1 < val2) {
					            return 1;
					        } else {
					            return 0;
					        }            
					    } 	
					},
					toggle:function(){				//显隐切换
						$('.toggle h2').click(function(){
							if($(this).parents('.toggle').next().is(':hidden')){
								$(this).find('i').attr('class','fa fa-caret-down');
								$(this).parents('.toggle').next().slideDown(200);
							}else{
								$(this).find('i').attr('class','fa fa-caret-up');
								$(this).parents('.toggle').next().slideUp(200);
							};
						});
					},
					line:function(linedata){				//折线图
						var line = linedata.reverse();
						console.log(line);
						function randomData(i) {
						    now = new Date(now - oneDay);
						    value = line[i];
						    return {
						        name: now.toString(),
						        value: [
						            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
						            value
						        ]
						    }
						}					
						var data = [];
						var now = new Date();
						var oneDay = 24 * 3600 * 1000;					
						for (var i = 0; i < 15; i++) {
						    data.push(randomData(i));
						}							
						option = {
						    title: {
						        show:false
						    },
						    tooltip: {
						        trigger: 'axis',
						        formatter: function (params) {						       
						            params = params[0];
						            var date = new Date(params.name);
						            return date.getDate() + '号:' + params.value[1];
						        },
						        axisPointer: {
						            animation: false
						        }
						    },
						    xAxis: {
						        type: 'time',						       
						        splitLine: {
						            show: true
						        },
						        name:'日期',
						        splitNumber:15,
						        axisLabel:{
						        	 formatter:function(value, index){
						        	 var date = new Date(value);
						        	 return date.getDate();
						        }
						        }						       
						    },
						    yAxis: {
						        type: 'value',						     
						        splitLine: {
						            show: false
						        },
						        name:'金额:元',
						         axisLabel:{
						        	formatter:function(value, index){	
						        	var num = value;
						        	return num;
						        	}
						       	}
						    },
						    grid:{
						    	top:40,
						    	bottom:40,
						    	right:'10%',
						    	left:'10%'
						
						    },
						    series: [{
						        name: '数据',
						        type: 'line',
						        showSymbol: false,
						        hoverAnimation: false,
						        data: data
						    }]
						};
						myChart.setOption(option);
					},
					piechart:function(mydata){		//饼状图
                        var data = mydata.sort(this.down("value"));
                        var moredata = [];
                        var datatext = [];
                        var all = 0;
                        for(var i = 0;i<data.length;i++){
                            if(i<9){
                                moredata.push({
                                    name:data[i].name.substring(0,10),
                                    value:data[i].value
                                });
                                datatext.push(data[i].name.substring(0,10));
                            }else{
                                all+=data[i].value;
                            }
                        }
                        datatext.push('其它');
                        moredata.push({
                            name:'其它',
                            value:all
                        });
                        option2 = {
						    title : {
						        show:false
						    },
						    tooltip: {
						        trigger: 'item',
						        formatter: "{d}%"
						    },
						    legend: {						       
						        top: 0,
						        data: datatext,
						        width:300
						    },
						    series : [
						        {
						            name: '数据',
						            type: 'pie',
						            radius : '55%',
						            center: ['50%', '60%'],
						            data:moredata,
						            itemStyle: {
						                emphasis: {
						                    shadowBlur: 10,
						                    shadowOffsetX: 0,
						                    shadowColor: 'rgba(0, 0, 0, 0.5)'
						                }
						            }
						        }
						    ]
						};
					},
					date:function(){						//日期选择
						$('#starttime').datetimepicker({    //起始日期
				        format: 'yyyy-mm-dd',
				        language:  'fr',
				        weekStart: 1,
				        todayBtn:  1,
				        autoclose: 1,
				        todayHighlight: 1,
				        startView: 2,
				        minView: 2,
				        forceParse: 0,
				         endDate:new Date()  
				   });
					$('#endtime').datetimepicker({    //截止日期
				        format: 'yyyy-mm-dd',
				        language:  'fr',
				        weekStart: 1,
				        todayBtn:  1,
				        autoclose: 1,
				        todayHighlight: 1,
				        startView: 2,
				        minView: 2,
				        forceParse: 0,
				         endDate:new Date()  
				 }).on('changeDate',function(){				//日期限制
				  	if(!$('#starttime input').val()){
				  		$('#endtime input').val('');
				  		alert('起始时间不能为空');
				  		return false;
				  	};
				  	var start = new Date($('#starttime input').val()).getTime();
				  	var end = new Date($('#endtime input').val()).getTime();	
				  	if(end - start < 0){
				  		alert('截止时间不能小于起始时间');
				  		$('#endtime input').val('');
				  		return false;
				  	}
				  	//if((end - start) >(86400*30000)){
				  		// $('#endtime input').val('');
				  		// alert('时间间隔不能超过30天');
				  		// return false;
				  	// }else{
			  			vm.$http.post('/statistics/yesterday_sale',{
		                    start : $('#starttime input').val(),
		                    end : $('#endtime input').val()		               
		                },{emulateJSON: true}).then(function (res) {
		                	//console.log(res.data.data);
							this.items = res.data.data;
							fuc(this.items);
				            vm.picnav(data);
							vm.pieview(0,data);
							Piechart.setOption(option2);
		                },function (res) {
							vm.error(res);
		                });		  	
				  	//};
				  });
					},
					error:function(res){	//错误抛出
						console.error("错误类型:"+res.status,"错误描述:"+res.statusText);
					},
					postdate:function(date){
						this.$http.post('/statistics/yesterday_sale',{
		                    date:date             
		                },{emulateJSON: true}).then(function (res) {
		                	this.items = res.data.data;
		                	fuc(this.items);
		                	this.line(res.data.date);
		                },function (res) {
							vm.error(res);
		                });	
					},
					},
					created:function(){
						this.view(0);		//默认显示昨日
						data = {'price':[],'sales':[]};
					},					
					mounted:function(){		
						myChart = echarts.init(document.getElementById('echarts'));
						Piechart = echarts.init(document.getElementById('piechart'));
						this.line(data.price);		//折线图
						this.toggle();		//点击显隐
						this.nav();			//导航切换
						this.date();		//日期选择
						
					}
			});
			function fuc(arr){
                vm.allmoney = 0;
				for(var i in arr){
                    vm.allmoney += arr[i].money;
					data.price[i] = {
						value:arr[i].money,
						name:arr[i].name
					};
					data.sales[i] = {
						value:arr[i].num,
						name:arr[i].name
					};
					datatext[i] = arr[i].name;
				}
			}